<template>
  <div id="rightDown1">
    <div class="up">
      <div class="divBorder">
        <div class="mid">Anti-DDos流量清洗</div>
      </div>
      <div class="divBorder"><div class="mid">SSL-VPN</div></div>
      <div class="divBorder"><div class="mid">服务器安全卫士</div></div>
      <div class="divBorder"><div class="mid">DDos高防IP</div></div>
      <div class="divBorder"><div class="mid">云下一代防火墙</div></div>
      <div class="divBorder"><div class="mid">WEB应用防火墙</div></div>
    </div>
    <div class="down">
      <div class="divBorder"><div class="mid">云堡垒机</div></div>
      <div class="divBorder"><div class="mid">域名无忧</div></div>
      <div class="divBorder"><div class="mid">数据加密</div></div>
      <div class="divBorder"><div class="mid">日志审计</div></div>
      <div class="divBorder"><div class="mid">数据库安全</div></div>
      <div class="divBorder"><div class="mid">网页防篡改</div></div>
      <div class="divBorder"><div class="mid">渗透测试</div></div>
      <div class="divBorder"><div class="mid">漏洞扫描</div></div>
      <div class="divBorder"><div class="mid">终端杀毒</div></div>
      <div class="divBorder"><div class="mid">云解析</div></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
#rightDown1 {
  display: flex;
  background-color: rgb(4, 80, 156);
  height: 94%;
  width: 100%;
  flex-direction: column;
  .up {
    flex: 1;
    display: flex;
    .divBorder {
      margin: 0.3vh 0.1vw;

      border: 1px solid #fff;
      .mid {
        font-weight: bold;
        text-align: center;
        position: relative;
        font-size: 1.1vw;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
  }
  .down {
    flex: 1;
    display: flex;
    .divBorder {
      margin: 0.3vh 0.1vw;
      border: 1px solid #fff;
      .mid {
        text-align: center;
        font-weight: bold;
        font-size: 0.9vw;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
      }
    }
  }
}
</style>
